<template>
    <view class="Store">
        <image :src="$imgUrls(pageData.shop_logo)" mode="aspectFill" class="shop_logo" v-if="pageData.shop_logo"></image>
        <view class="Wrapper">
            <text class="rows ellipsis black size28 bold">{{ pageData.shopName }}</text>
            <view class="bussName">{{ pageData.bussName }}</view>
            <view class="row j-sb a-center">
                <view class="li" v-if="pageData.sales_number">
                    <text class="li_name">已服务：</text>
                    <text class="li_num">{{ pageData.sales_number }}</text>
                </view>
                <view class="li" v-if="pageData.heat">
                    <text class="li_name">热度：</text>
                    <text class="li_num">{{ pageData.heat }}</text>
                </view>
                <view class="li" v-if="pageData.distance">
                    <text class="li_name">距离：</text>
                    <text class="li_num">{{ $pop.formatDistance(pageData.distance) }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['pageData'],
        data() {
            return {};
        },
        methods: {}
    };
</script>

<style lang="scss" scoped>
    .Store {
        width: 100%;
        background-color: #fff;
        padding: 26rpx 24rpx;
        margin-top: 24rpx;
        display: flex;
        .shop_logo {
            width: 140rpx;
            height: 140rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
        }
        .Wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            .bussName {
                padding: 4rpx 14rpx;
                background: #edf5ff;
                color: $color_28;
                font-size: 24rpx;
                display: inline-block;
                border-radius: 4rpx;
            }
            .li {
                display: flex;
                align-items: center;
                .li_name {
                    color: #999;
                    font-size: 24rpx;
                }
                .li_num {
                    color: #333;
                    font-size: 24rpx;
                }
            }
        }
    }
</style>
